/*
 * @Author: Cavetr
 * @Date: 2021-12-07 15:17:56
 * @Description: file content
 */

import React, { useState } from 'react';
import { View, StyleSheet, Text, TextInput, Dimensions, TouchableOpacity } from 'react-native';
let WINDOW = Dimensions.get('window');
let width = WINDOW.width;
let height = WINDOW.height;

const styles = StyleSheet.create({
  black: {
    position: 'absolute',
    top: 0,
    left: 0,
    width,
    height,
    backgroundColor: 'black',
    opacity: 0.5,
  },
  console: {
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'aliceblue',
    borderStyle: 'solid',
    borderWidth: 2,
    borderColor: 'lightcoral',
    width: width / 2,
    height: height / 2,
    top: height / 4,
    left: width / 4,
    borderRadius: 10,
  },
  buttons: {
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    width: width / 3,
  },
  button: {
    width: width / 10,
    backgroundColor: 'peachpuff',
    textAlign: 'center',
    padding: 5,
  },
  inputBox: {
    backgroundColor: 'lightgray',
    width: width / 4,
    padding: 2,
    margin: 20,
    borderRadius: 3,
    textAlign: 'center',
  },
  textFont: {
    fontSize: 20,
  },
});

export default function ChangeNameBox({users,setUsers,setIsShowBox}) {
  const [name, setName] = useState(users[0].name);
  function changeUserName(newName) {
    if (newName !== users[0].name) {
      const users_t = [...users];
      users_t[0].name = newName;
      setUsers(users_t);
    }
    setIsShowBox();
  }
  return (
    <>
      <View style={styles.black} />
      <View style={styles.console}>
        <Text style={styles.textFont}>请输入你修改后的名字</Text>
        <TextInput style={styles.inputBox} value={name} onChangeText={(text) => setName(text)} />
        <View style={styles.buttons}>
          <TouchableOpacity onPress={() => changeUserName(name)}>
            <Text style={[styles.button, styles.textFont]}> 确认 </Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={setIsShowBox}>
            <Text style={[styles.button, styles.textFont]}> 取消 </Text>
          </TouchableOpacity>
        </View>
      </View>
    </>
  );
}
